<template>
<div class="body">
  <div class="content">
    <div class="login-info">
      <div class="logo"><img src="/images/icon-binance.png"/></div>
      <div class="login-title">欢迎登录</div>
      <div class="login-title">Binance Alpha</div>
      <div class="login-input"><input placeholder="账号"></div>
      <div class="login-input"><input placeholder="密码" type="password"></div>
      <div class="btn-login" @click="router.push({name:'portal'})">登录</div>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">
import {ref, reactive, watch} from "vue";
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
</script>

<style scoped lang="scss">
.body{
  width: 100%;
  height: 100%;
  background: #f3f4f7;
  display: flex;
  justify-content: center;
  color: #5b5b5b;
  font-size: 16px;
  .content{
    display: flex;
    align-items: center;
    .login-info{
      padding: 30px;
      background: #FFFFFF;
      border-radius: 8px;
      .logo{
        text-align: center;
        margin-bottom: 10px;
        >img{
          width: 40px;
          height: 40px;
        }
      }
      .login-title{
        text-align: center;
      }
      .login-title +.login-title{
        margin-top: 5px;
      }
      .login-input{
        margin-top: 20px;
        width: 350px;
        height: 40px;
        border-radius: 10px;
        border: 1px solid #e4e6ef;
        line-height: 40px;
        padding: 0 8px;
        >input{
          width: 100%;
          height: 30px;
          font-size: 14px;
          border: none;
          outline: none;
        }
      }
      .login-input+.login-input{
        margin-top: 10px;
      }
      .btn-login{
        width: 100%;
        height: 40px;
        margin-top: 20px;
        background-color: #FCD535;
        text-align: center;
        line-height: 40px;
        border-radius: 10px;
        color: #202630;
      }
    }
  }
}
</style>
